<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/lib/bootstrap.min.css"/>
		<script src="js/lib/jquery-1.11.0.js"></script>
		<script src="js/lib/bootstrap.min.js"></script>
		<script src="js/lib/vue.min.js"></script>
		<script src="js/lib/vue-resource.js"></script>
		<script src="js/base.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<style>
		body{
	 		font-size:12px;
	 	}
	 	table,
		th,
		td {
			border: 1px solid grey;
			border-collapse: collapse;
			padding: 5px;
			vertical-align: middle !important;
		}		
		table td:nth-child(even) {
			
		}
		table tr:nth-child(1) {
			background-color:#f1f1f1;
		}
		input{
			width:280px;
		}
		span{
			width:20px;color:red;display:inline-block;text-align:center;
		}
		#sho{
			width:300px;
			height:50px;
			background:#d9534f;
			opacity:0.8;
			border-radius:8px;
			color:#fff;
			text-align: center;
			font-size:30px;
			position: absolute;
			top:0px;
			left:550px;
			display:none;
		}
	</style>
	<body>
		<div class="" id="box">
				<div class="">
		<!--加载动画-->
		<div class="wrapper">
            <div id="loader-wrapper">
                <div id="loader"></div>
            </div>
      </div>					   
			   			<div style="padding:15px 5px 0px 5px;border:3px solid #ccc;margin-bottom:15px">
			<table class="table table-hover">				
				<tbody>
					<tr>
						<th colspan="12">新增加一个三级分销比率:</th>
					</tr>
					<tr>
						<td>品牌编号：</td>
						<td colspan="12">
						<input id="Brand" v-model="Brand" type="text" class="form-control" style="width:280px;" placeholder="请输入品牌ID"/>
						</td>											
					</tr>					
					<tr>
						<td>比率：</td>
						<td colspan="12">
							<input id="Rate" v-model="Rate" placeholder="请输入费率，例如：0.23" class="form-control" type="text" style="width:280px;" />							
						</td>	
					</tr>
					<tr>
						<td>上级：</td>
						<td colspan="12">
							<input id="up" v-model="up" placeholder="请输入上级" class="form-control" type="text" style="width:280px;" />		
						</td>	
					</tr>
					<tr>
						<td colspan="12">
							<input id="btn" type="btn" v-on:click="add2()" value="新增" class="btn btn-danger" style="display:block;margin:0 210px;"/>
						</td>
					</tr>					
				</tbody>
			</table>					
			</div>
			<!--模态弹出框-->
				<div class="modal fade" role="dialog" id="dle">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<button class="close" data-dismiss="modal">
									<span class="">&times;</span>
								</button>
								<h4 class="modal-title">确认删除吗？</h4>
							</div>
							<div class="modal-body text-right">
								<button class="btn btn-primary" data-dismiss="modal" v-on:click="deleteMsg(nowIndex)">确认</button>
								<button class="btn btn-danger" data-dismiss="modal">取消</button>
							</div>
						</div>
					</div>
				</div>
			
		</div>
	</body>
	<script>
	$(function(){
		var vm = new Vue({
			el:"#box",
			data:{
				mydata:[],
				brand_id:"",
				grade:"",
				name:"",
				money:"",
				discount:"",
				rate:"",
				remark:"",
				Brand:"",
				Rate:"",
				up:"",
				nowIndex:-100
			},			
			methods:{				
				deleteMsg:function(n){					
							this.mydata.splice(n,1)
                    this.$http.post(window.baseUrl+"user/thirdlevel/prod/add",{brand_id:a,grade:b,name:c,money:d,discount:e,rate:f},{emulateJSON:true}).then(
                        function (res) {
                            console.log("开始调用远程数据...")
                            console.log(res)
                        },function (res) {
                            console.log("失败")
                        }
                    );
				},
				add2:function(){
					var a2 = $('#Brand').val();
					var b2 = $('#Rate').val();
					var c2 = $('#up').val();
					if(a2!="" && b2 !="" && c2!=""){
						this.$http.post(window.baseUrl+"user/thirdlevel/ratio/add",{brand_id:a2,ratio:b2,pre_level:c2},{emulateJSON:true}).then( 
								   function (res1) { 
								    console.log(res1)
								    alert("恭喜您.添加数据成功！")
								   },function (res1) { 
								   	console.log(res1)
								   	alert("数据添加失败！")
								   } 
								  );
					}else{
						alert("请完善输入信息！")
					}					
					this.Brand = ""
				    this.Rate =""
				    this.up = ""
				},				
				rest2:function(){
					this.Brand = ""
				    this.Rate =""
				    this.up = ""
				}
			}
		})		
	})
</script>
</html>

